<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <div class="col-lg-10">

        <div class="page-header" style="margin-top: -20px;margin-bottom: 5px;">
            <h2>用户管理列表</h2>
        </div>

        <!--用户处理框-->
        <div class="panel panel-default">
            <div class="panel-body">
                <!--搜索栏-->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">~~名称：
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">查询</button>
                    </form>
                </div>

                <!--添加按钮-->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                    <button class="btn btn-success" id="saveBtn">添加用户</button>

                    <!--表格-->
                    <table class="table table-hover table-bordered table-striped">
                        <caption> </caption>
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                            <th>邮编</th>
                            <th>名称</th>
                            <th>城市</th>
                            <th>邮编</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td><button type="submit"  data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td><button type="submit"  data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="submit" data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="submit" data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                            <td>560001</td>
                            <td><button type="submit" data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="submit" data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="submit"  data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>
                        <tr>
                            <td>Uma</td>
                            <td>Pune</td>
                            <td>411027</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="submit" id="updateBtn" class="btn btn-info btn-sm">更改</button>
                                <button type="submit" class="btn btn-danger btn-sm">删除</button></td>
                        </tr>

                        </tbody>
                    </table>

                </div>
            </div>

            <!--分页栏-->
            <nav aria-label="Page navigation">
                <ul class="pager">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <!--消息提示框-->
        <div class="alert alert-success alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>删除成功：</strong>当前数据以被删除！
        </div>
        <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>删除失败：</strong>java.lang.RuntimeException 删除数据无效！
        </div>
    </div>
</div>



<!--添加用户对话框-->
<div class="modal fade" id="saveUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">保存用户信息</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!--修改用户对话框-->
<div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑用户信息</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('#saveBtn').click(function () {
            $('#saveUserModal').modal({
                show:true,
                backdrop:'static'
            });
        });

        $('#updateBtn').click(function () {
            $('#updateUserModal').modal({
                show:true,
                backdrop:'static'
            });
        });

    });
</script>

